<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/shop.css" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">

		<!-- 引入组件 -->
		<script src="../js/ajax.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/vue.js"></script>
		<script src="../js/vant.js"></script>
		<script src="html5plus://ready"></script>
		<script type="text/javascript">
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。"
				//var self = plus.webview.currentWebview();
				
			});
		</script>
	</head>
	<body>
		<div id="shop">
			<header id="shopHeader">
				<van-row >
					<van-col span="4" offset="9">
						<h3>购物车</h3>
					</van-col>
					<van-col span="7" offset="4">
						<br />
						<br />
						<span @click="clear">清空购物车</span>
					</van-col>
				</van-row>
			</header>
			<section  class="com-main">
				<div v-show="clearCar" align="center">
					<br />
					<br />
					<span>
						<van-icon name="shopping-cart-o" size="30px"  />
					</span>
					
					<br />
					<p>购物车空空如也</p>
				</div>
				<div v-show="clearCar==false">
					<div class="list" v-for="(item,index) in d">
						<van-checkbox v-model="item.checked" style="margin-top: 10%; margin-left: 2%;" class="checkbox" @change="select(item.Id,item.RealPrice,item.buyCount,item.checked)" :value="item.Id"></van-checkbox>
						<div class="item1">
							<dl >
								<!--图片区域-->
								<dt @click="skipPd(item.Id)">
									<img :src="item.CoverImage" onerror="this.src='../img/product_default.png'" />
								</dt>
								<dd>
									<!--文字 计数器-->
									<div class="pcenter">
										<div style="float: left;height: 50%;width:100%;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
											<span class="listName" style="margin-left:25px;" v-text="item.Name"></span>
										</div>
										<div style="float: left;height: 50%;width:100%;">
											<div style="margin:13px 0px 0px 60px;">
												<van-stepper v-model="item.buyCount" @plus="add(item.Id, item.buyCount+1)" @minus="minus(item.Id,item.buyCount-1)" />
											</div>
										</div>
									</div>
									<!--价格 删除图标-->
									<div class="pRight">
										<div style="height: 50%;margin-top: -90px;">
											<small style="color: red;font-size: 15px;margin-left: 20px;">￥</small>
											<span style="color: red;font-size: 13px;"><span v-text="item.RealPrice"></span></span>
										</div>
										<div style="float: left;height: 50%;width:100%;">
											<div style="margin-top: -52px;">
												<span style="float:right;">x &nbsp <span v-text="item.buyCount"></span></span>
												<!--删除图标-->
												<van-button type="default" style="width: 100%;height: 30px;" @click="btn_delete(item.Id)">
													<van-icon name="delete" />
												</van-button>
											</div>
										</div>
									</div>
								</dd>
							</dl>
						</div>
					</div>
					<!--总价结算-->
						<div class="settleAccounts">
							<van-submit-bar :price="totalMoney*100" button-text="提交订单" @submit="onSubmit" />
							<van-checkbox v-model="checked" @change="selectAll">全选</van-checkbox>
						</div>
				</div>
			</section>
		</div>
		<script>
			var vm = new Vue({
				el: "#shop",
				data: {
					checked:"",
					clearCar:true,
					d: [],
					phone: "",
					buyCount: 1,
					jsonData: {},
					checkedData:[]
				},
				mounted: function() {
					var userData = JSON.parse(plus.storage.getItem("userData"));
					var data1 = JSON.parse(localStorage.getItem(userData.Phone)); //购物车商品能够直接拿到是哪个商品以及对应商品数量。
					var Id;
					var Name;
					var CoverImage;
					var RealPrice;
					if(data1.length > 0) {
						this.isShow = false;
						for(var i = 0; i < data1.length; i++) {
							ajax({
								url: "http://dsapi.ysd3g.com/API/GoodsDetail",
								dataType: "jsonp",
								data: {
									gId: data1[i].goodsId
								},
								success(res) {
									if(res.Error) {
										vm.$toast.fail(res.Msg);
									} else {
										Id = res.Detail.Id;
										Name = res.Detail.Name;
										CoverImage = res.Detail.CoverImage;
										RealPrice = res.Detail.RealPrice;
										for(var j = 0; j < data1.length; j++) {
											if(Id == data1[j].goodsId) {
												vm.buyCount = data1[j].buyCount;
											}
										}
										vm.jsonData = {
											"Id": Id,
											"Name": Name,
											"CoverImage": CoverImage,
											"RealPrice": RealPrice,
											"buyCount": vm.buyCount,
											"checked": false
										}
										vm.d = vm.d.concat(vm.jsonData);
									}
								}
							});
						}
					}
					
// 					this.$dialog.confirm({
// 						title: '提示',
// 						message: '是否登录',
// 						closeOnClickOverlay:true
// 					}).then(() => {
// 						// on confirm
// // 						var self = plus.webview.currentWebview();
// // 						var child = plus.webview.create("../shops/ClearShop.html", "ClearShop", {
// // 							top: "70px",
// // 							bottom: "0px",
// // 							scrollIndicator: "none",
// // 							zindex: 1
// // 						});	
// // 						self.append(child);
// // 						plus.webview.show("ClearShop");
// 					}).catch(() => {
// 						// on cancel
// 						plus.webview.show("../views/home.html");
// 					});
					
					
				},
				computed: {
					totalMoney:function() {
						var money = 0;
						for(var i = 0; i < this.d.length; i++) {
							if(this.d[i].checked) {
								money += this.d[i].RealPrice * this.d[i].buyCount
							}
						}
						return money;
					}
				},
				methods: {
					clear:function(){
						this.$dialog.confirm({
							title: '确认框',
							message: '确定要清除购物车吗？'
						}).then(() => {
							localStorage.removeItem(this.phone);
							this.$toast.success("清除成功");
							this.d = [];
						}).catch(() => {
							this.$toast.fail("点击取消");
						});
						
					},
					add:function(id, num) { //购物车数量增加
						var goodsArr = JSON.parse(localStorage.getItem(vm.phone)); //购物车内的商品
						for(var i = 0; i < goodsArr.length; i++) { //遍历商品
							if(goodsArr[i].goodsId == id) {
								goodsArr[i].buyCount += 1; //商品数量+1
								localStorage.setItem(vm.phone, JSON.stringify(goodsArr));
							}
						}
					},
					minus:function(id, num) { //购物车数量减少
						var goodsArr = JSON.parse(localStorage.getItem(vm.phone)); //购物车内的商品
						for(var i = 0; i < goodsArr.length; i++) { //遍历商品
							if(goodsArr[i].goodsId == id) {
								goodsArr[i].buyCount -= 1; //商品数量-1
								localStorage.setItem(vm.phone, JSON.stringify(goodsArr));
							}
						}
					},
					btn_delete:function(id) { //删除购物车商品
						this.$dialog.confirm({
							title: '删除',
							message: '是否确定删除'
						}).then(() => {
							var goodsArr = JSON.parse(localStorage.getItem(vm.phone)); //购物车内的商品
							for(var i = 0; i < goodsArr.length; i++) { //遍历商品
								if(goodsArr[i].goodsId == id) {
									goodsArr.splice(i, 1); //删除此商品
									localStorage.setItem(vm.phone, JSON.stringify(goodsArr));
									//刷新页面
									vm.d.splice(i, 1);
									vm.$toast.fail("已删除");
								}
							}
						}).catch(() => {
							vm.$toast.fail("已取消");
						});
					},
					onSubmit:function() { //提交订单
						plus.webview.create("shopping/pay.html", "pay", {}, {
							pids: vm.checkedData,
							isShow: false,
							address: true
						}).show("slide-in-left");
					},
					skipPd:function(id) {
						plus.webview.create("../details/detail.html", "detail", {}, {
							Id: id
						}).show("slide-in-left");
					},
					select:function(id, price, buyCount, checked) {//选中后触发
						if(checked) {
							var cd = {
								goodsId: id,
								buyCount: buyCount
							}
							this.checkedData = this.checkedData.concat(cd)
						} else {
							for(var i = 0; i < this.checkedData.length; i++) {
								if(this.checkedData[i].goodsId == id) {
									this.checkedData.splice(i, 1);
								}
							}
						}
					},
					selectAll() {//全选
						for(var i = 0; i < this.d.length; i++) {
							this.d[i].checked = this.checked;
						}
					}
				}
			})
		</script>
	</body>
</html>
